<template>
  <div id="jobDetail">
    <div class="jd_top">
      <el-row style="padding-top:30px">
        <el-col :span="4">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="16">
          <div class="jd_top_left">
            <div>
              <h2>{{ job.jobName }}</h2>
            </div>
            <div style="color: #fa6a43;font-size:28px;font-weight:600">{{ job.minSalary }}-{{ job.maxSalary }}K</div>
            <div style="margin-top:5px;color: rgba(255,255,255,.7);">
              {{ codeToText(job.cityCode) }}<span> · </span>{{ job.experience }}<span> · </span>{{ job.minEdu }}
            </div>
            <div style="margin-top:5px;color: rgba(255,255,255,.7);"> {{ job.jobPattern }}</div>
          </div>
          <div class="jd_top_right">
            <div style="color: rgba(255,255,255,.7);">{{ job.welfare }}</div>
            <div>
              <el-button type="primary"  plain @click=collectJob><span class="el-icon-star-off"></span> 收藏职位</el-button>
              <el-button type="primary" @click="send" icon="el-icon-s-promotion">立即投递</el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple"></div>
        </el-col>
      </el-row>
      <el-dialog title="选择投递简历" :visible.sync="dialogTableVisible" width="500px">
        <el-form :model="form">
          <el-form-item label="应聘方式" :label-width="formLabelWidth">
            <el-select v-model="form.applyWay" placeholder="请选择">
              <el-option key="1" label="线上" value="线上"></el-option>
              <el-option key="2" label="线下" value="线下">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="应聘城市" :label-width="formLabelWidth">
            <el-input v-model="form.applyCity" autocomplete="off" style="width:61.5%"></el-input>
          </el-form-item>
          <el-form-item label="个人简历" :label-width="formLabelWidth">
            <el-select v-model="resumeId" filterable placeholder="请选择">
              <el-option
                  v-for="item in resumeList"
                  :key="item.resumeId"
                  :label="item.resumeName"
                  :value="item.resumeId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
          <span slot="footer" class="dialog-footer">
    <el-button @click="dialogTableVisible = false">取 消</el-button>
    <el-button type="primary" @click="deliver">投 递</el-button>
  </span>
      </el-dialog>
    </div>
    <div class="jd_bottom">
      <el-row style="padding-top:30px">
        <el-col :span="4">
          <div class="grid-content bg-purple"></div>
        </el-col>
        <el-col :span="16">
          <div class="jd_bottom_left">
            <div class="jd_user" style="width:35%;height:80px;cursor:pointer">
              <el-avatar :size="60" style="vertical-align: bottom">
                <svg class="font-icon" aria-hidden="true" style="width:60px;height:60px;">
                  <use xlink:href="#icon-a-ziyuan112"></use>
                </svg>
              </el-avatar>
              <div class="profile-info-cont">
                <span style="font-size:18px;  font-weight: 600;">{{ job.userName }}</span>
                <div class="introduce">
                <span
                    style="display: inline-block; width:140px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                </span>
                </div>
              </div>
            </div>
            <div class="jd_detail">
              <div style="font-size:18px; ">职位描述</div>
              <el-divider></el-divider>
              <div class="text_detail" style="white-space:pre-line">
                {{ job.jobInfo }}
              </div>
              <div style="font-size:18px;margin-top: 20px ">公司介绍</div>
              <el-divider></el-divider>
              <div class="text_detail" style="white-space: pre-line;">
                {{ company.companyInfo }}
              </div>
              <div style="font-size:18px;margin-top: 20px ">工作地址</div>
              <el-divider></el-divider>
              <div id="containerMap">
              </div>
              <div class="text_detail" style="margin-top:5px"><span class="el-icon-map-location"></span>
                {{ company.address }}
              </div>
            </div>
          </div>
          <div class="jd_bottom_right">
            <div>
              <PhoneLogin></PhoneLogin>
            </div>
            <div class="company-info" style="cursor:pointer;padding: 20px;  background-color: white;margin-top: 20px;">
              <div style="font-size:18px; ">公司基本信息</div>
              <el-divider></el-divider>
              <div class="company_img">
                <img style="width:50px;height:50px;vertical-align: middle"
                     :src="company.companyLogoUrl"
                     alt="">
                <div
                    style="font-size:18px;display:inline-block;padding-left: 20px;width:180px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                  {{ job.companyName }}
                </div>
              </div>
              <div class="com_detail"><span class="iconfont icon-gongsiguimo"></span>{{ company.companyScale }}</div>
              <div class="com_detail"><span class="iconfont icon-gongsixingye"></span> {{ company.industry }}</div>
              <div class="com_detail"><span class="iconfont icon-gongsixingzhi"></span> {{
                  company.companyType == 0 ? '国企' : company.companyType == 1 ? '央企' : company.companyType == 2 ? '民企' : '外企'
                }}
              </div>
              <div class="com_detail"><span class="iconfont icon-rongziqingkuang"></span> {{ company.financeList }}
              </div>
            </div>
            <div style="height: 200px;width:100%;margin-top: 5px">
              <el-image fit="fit" alt="" :src="img"></el-image>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple"></div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import PhoneLogin from "@/components/common/PhoneLogin";
import {CodeToText} from "element-china-area-data";
import {deliverResume, getJob, getResume, jobCollect} from "@/network/recruit";
import img from "@/assets/img/recruitBanner.png";

export default {
  name: "JobDetail",
  components: {
    PhoneLogin
  },
  data() {
    return {
      img: img,
      map: null,
      job: {},
      jobId: '',
      company: {
        address: '北京'
      },
      formLabelWidth: '100px',
      dialogTableVisible: false,
      resumeList: [],
      resumeId: '',
      form: {
        userId: '',
        companyId: '',
        resumeId: '',
        jobId: '',
        applyWay: '',
        applyCity: '',
        jobName: '',
        resumeName: '',
        companyName: '',
        userName: '',
      }
    }
  },
  created() {
    if (this.$route.params.jobId != undefined) {
      this.jobId = this.$route.params.jobId;
      sessionStorage.setItem("jobId", this.jobId);
    }
    this.findJob(sessionStorage.getItem("jobId"));
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "c0ad1f48b4289ecba0c417b8c1c8cb5b",             // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.PlaceSearch'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.map = new AMap.Map("containerMap", {  //设置地图容器id
          viewMode: "3D",    //是否为3D地图模式
          zoom: 10,           //初始化地图级别
        });
        let MSearch = new AMap.PlaceSearch({
          city: '010',
          map: this.map,
          pageSize: 1, //每页结果数,默认10
          pageIndex: 1, //请求页码，默认1
        });
        MSearch.search(this.company.address, function () {

        });
      }).catch(e => {
        console.log(e);
      });

    },

    codeToText(value) {
      return CodeToText[value]
    },
    findJob(jobId) {
      getJob(jobId).then(res => {
        this.job = res.data.data;
        this.company = res.data.data.company;
      })
    },
    collectJob(){
      if (this.$store.getters.token) {
        jobCollect(localStorage.getItem("common_userId"),this.job.jobId).then(res=>{
          this.$message.success(res.data.data);

        })
      }else{
        this.$message.error("你还没登录，请先登录");
        this.$router.push("/login");
      }
    },
    send() {
      if (localStorage.getItem("common_userName")) {
        getResume(localStorage.getItem("common_userName")).then(res => {
          if (res != undefined) {
            this.resumeList = res.data.data;
          }
        })
        this.dialogTableVisible = true;
      } else {
        this.$message.error("你还没登录，请先登录");
        this.$router.push("/login");
      }
    },
    deliver() {
      if (this.resumeId == "") {
        this.$message.warning("简历不能为空！")
      }else if (this.form.applyWay == undefined || this.form.applyWay == '') {
        this.$message.warning("应聘方式不能为空！")
      }else{
        this.form.userId = localStorage.getItem("common_userId");
        this.form.companyId = this.company.companyId;
        this.form.resumeId = this.resumeId;
        this.form.jobId = this.job.jobId;
        this.form.jobName = this.job.jobName;
        this.form.resumeName = this.resumeList.find(r=>r.resumeId == this.resumeId).resumeName;
        this.form.companyName = this.company.companyName;
        this.form.userName = localStorage.getItem("common_userName");

        deliverResume(this.form).then(res => {
          if (res != undefined) {
            this.$message.success("投递成功！");
            this.dialogTableVisible = false;
          }
        })
      }
    }
  },

  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  }
}
</script>

<style scoped>
.grid-content {
  min-height: 50px;
  font-size: 14px;
}

.jd_top {
  background: #444c60 url(../../assets/img/detail-bg.jpg) center center no-repeat;;
}



.jd_top_left {
  width: 50%;
  height: 200px;
  color: white;
  float: left;
}

.jd_top_right {
  width: 50%;
  height: 200px;
  color: white;
  float: right;
  text-align: right;
  line-height: 92px;
}

.jd_bottom_left {
  width: 63%;
  background-color: white;
  float: left;
  padding: 20px;
}

.jd_bottom_right {
  width: 31%;
  margin-left: 20px;
  float: left;
}

.profile-info-cont {
  margin-left: 20px;
  display: inline-block;
  color: #424a5e;
}

.introduce {
  padding-top: 0px;
  color: #8b8e99;
  font-size: 14px;
}

.el-divider--horizontal {
  margin: 10px 0;
}

.text_detail {
  word-break: break-all;
  word-wrap: break-word;
  color: #51586d;
  line-height: 36px;
  font-size: 14px;
}

#containerMap {
  width: 100%;
  height: 180px;
}

.com_detail {
  margin: 8px 0;
}
</style>